import React, { Component } from "react";
import { Modal } from "antd";
import UserTaskSelector from './UserTaskSelector';
// import styles from "./UserSelectorModal.less";

const doNothing = () => {}
const wrappedModel = (candidateUsers, noticeChannel) => ({
  model: {
    properties: {
      candidateUsers: [ ...candidateUsers ],
      noticeChannel,
    },
  },
})

// Deprecated. Previously referenced by src/components/flowdetailpannel/DuedateSetting.jsx
class UserSelectorModal extends Component {
  constructor(props) {
    super(props);
    const { candidateUsers, noticeChannel } = props;
    this.state = {
      selectedModel: wrappedModel(candidateUsers, noticeChannel),
    }
  }

  handleOk = () => {
    const {
      candidateUsers: oldUsers,
      onCancel,
      onOk,
    } = this.props;
    const { selectedModel = {} } = this.state;
    const { properties = {} } = (selectedModel.model || {});
    const { candidateUsers = [], noticeChannel } = properties;
    onOk(candidateUsers, oldUsers, noticeChannel);
    onCancel();
  }

  handleDeleteUsers = (users, deleteAll, keys = []) => {
    const { disable } = this.props;
    if (disable) return false;
    const removedKeyMaps = keys.reduce((a, k) => {
      a[k] = true;
      return a;
    },{});
    let newUsers;
    let removedIndexes = [];
    if (deleteAll) {
      newUsers = [];
      removedIndexes = users.map((e, i) => i);
    } else {
      newUsers = users.filter((u, idx) => {
        if (removedKeyMaps[u.code]) {
          removedIndexes.push(idx);
          return false;
        }
        return true;
      });
    }
    // 删除关联的通知渠道
    const { selectedModel: { model = {} } = {} } = this.state;
    const { properties = {} } = model;
    let { noticeChannel = [] } = properties;
    let channel;
    removedIndexes.forEach((i) => {
      channel = noticeChannel[i];
      if (channel) {
        noticeChannel[i] = null;
      }
    })
    noticeChannel = noticeChannel.filter(Boolean);
    this.setState({ selectedModel: wrappedModel(newUsers, noticeChannel) });
  }

  handleUsersSelect = (selectData, defaultNoticeChannel) => {
    const { selectedModel: { model } } = this.state;
    const { properties = {} } = model || {};
    const { candidateUsers = [], noticeChannel = [] } = properties;
    const codeChannelMap = candidateUsers.reduce((map, u, i) =>
      {
        map[u.code] = noticeChannel[i];
        return map;
      },{}
    );
    const newNoticeChannel = selectData.map(u => codeChannelMap[u.code] || defaultNoticeChannel);
    this.setState({
      selectedModel: wrappedModel(selectData, newNoticeChannel),
    });
  }

  // eslint-disable-next-line
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { visible } = this.props;
    if (!visible && nextProps.visible) {
      const { candidateUsers = [], noticeChannel = [] } = nextProps;
      this.setState({
        selectedModel: wrappedModel(candidateUsers, noticeChannel),
      });
    }
  }

  render() {
    const { selectedModel = {} } = this.state;
    const { model = {} } = selectedModel;
    const { properties: { candidateUsers = [], noticeChannel } = {} } = model;

    const {
      appId,
      disable,
      dispatch,
      modelVariables,
      onCancel,
      title,
      visible,
    } = this.props;
    return (
      <Modal
        title={title}
        visible={visible}
        onOk={this.handleOk}
        onCancel={onCancel}
        width='642px'
        centered
        destroyOnClose
      >
        <UserTaskSelector
          appId={appId}
          changeModelVariableRef={doNothing}
          disable={disable}
          dispatch={dispatch}
          handleChangeProperties={doNothing}
          handleDeleteUsers={this.handleDeleteUsers}
          handleNoticeTypeChange={(v, indexes) => {
            const _nc = [ ...noticeChannel ];
            // eslint-disable-next-line
            indexes.forEach(i => (_nc[i] = v));
            this.setState({ selectedModel: wrappedModel(candidateUsers, _nc) });
          }}
          handleUsersSelect={this.handleUsersSelect}
          modelVariables={modelVariables}
          selectedModel={selectedModel}
        />

      </Modal>
    );
  }
}

export default UserSelectorModal;
